<!DOCTYPE html>
<html style="background:#4EC094;">
<head>
    <meta name="save" content="history">
    <meta name="renderer" content="webkit">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>思必达管理系统</title>
    <script src="/sybida/common/js/locahostadress.js" charset="utf-8"></script>
    <link rel="stylesheet"  href="/sybida/layui/css/layui.css">
    <style>
        .layui-row {
            margin: 45px 0;
        }



        #login-form {
            background-color: rgba(255, 255, 255, .8);
            filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#C8FFFF, endcolorstr=#C8FFFF);
            position: relative;
            padding: 30px 30px 10px;
        }

        #login-form .login-bottom {
            border-top: 1px #1ee solid;
            padding: 10px 0 5px;
            color: #444;
        }

        .footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            background-color: rgba(255, 255, 255, .5);
            padding: 10px 0;

        }

        @media screen and (max-height: 640px) {
            .footer {
                position: relative;
            }
        }

        .footer p {
            text-align: center;
            color: #444;
        }

        .warning-msg {display:block; bottom:58px; right:0px; position:fixed;}
        * html .warning-msg {position:absolute; right:18px}
        .notification {
            font-family:Digital,'Microsoft YaHei',STFangsong;
            display: flex;
            margin: 0 auto;
            width: 300px;
            min-height: 200px;
        }
        .notification .info {
            flex: 1;
            padding: 10px 10px 0 10px;
            background: #6c7e98;
            border-radius: 3px 0 0 3px;
            border-bottom: 3px solid #c0cdd1;
        }
        .notification .info span {
            margin: 0;
            padding: 0;
            font-size: 16px;
            color: #fff;
        }
        .notification .info p {
            margin: 0;
            padding: 5px 0;
            font-size: 12px;
            color: #c5bebe;
        }
        .notification .info .button {
            display: inline-block;
            margin: 3px 3px 5px 0;
            padding: 3px 7px;
            border-radius: 2px;
            border-bottom: 1px solid;
            font-size: 12px;
            font-weight: bold;
            text-decoration: none;
            color: #ecf0f1;
        }
        .notification .info .button.gray {
            background: #95a5a6 ;
            border-bottom-color: #798d8f;
        }
        .notification .info .button {
            background: #435d8a;
            border-bottom-color: #435d8a;
        }
        html, body {
            position: absolute;
            overflow: hidden;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background:#0F0;
            touch-action: none;
            content-zooming: none;
        }
        #canvas1 {
            position: absolute;
            width: 100%;
            height: 100%;
            background:#000;

        }
    </style>

</head>
<body >
<canvas id="canvas1"></canvas>
<div class="warning-msg" style="z-index:5;">
    <div class="notification">
        <div class="info">
            <span></span>
            <p></p>
            <a href="#" class="button" style="font-size: 18px;">公告</a><br><a href="#" class="button gray">请新注册的同学抓紧时间完善个人信息</a>
        </div>
    </div>
</div>
<div class="layui-container"   >
    <div class="layui-row">
        <div class="layui-col-md3 " >&nbsp;</div>
        <div class="layui-col-md5   layui-form layui-form-pane"  style="margin-left: 50px;" >
            <form  method="post" id="login-form" style="box-shadow:4px 6px 6px #000;">
                <div class="layui-form-item">
                    <h2 style="font-size: 20px;">思必达管理系统</h2>
                </div>
                <div id="pc-login">
                    <div class="layui-form-item">
                        <label for="L_account" class="layui-form-label">账号</label>
                        <div class="layui-input-block">
                            <input type="text" id="L_account" name="account" required
                                   lay-verify="required" autocomplete="off" class="layui-input"
                                   placeholder="请输入登录手机号">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="L_pass" class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input type="password" id="L_pass" name="pwd" required
                                   lay-verify="required" autocomplete="off" class="layui-input"
                                   placeholder="请输入密码">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="L_vercode" class="layui-form-label">验证码</label>
                        <div class="layui-input-inline">
                            <input type="text" id="L_vercode" name="verifycode" required
                                   lay-verify="required" placeholder="请输入验证码" autocomplete="off"
                                   class="layui-input">
                        </div>
                        <div class="layui-form-mid" style="padding: 0 !important; margin-right:0">
                            <canvas id="canvas" width="100" height="43"></canvas>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <button class="layui-btn" lay-filter="login" lay-submit>立即登录</button>
                        <span style="padding-left: 20px;">
							<a href="javascript:;" id="find-pass-btn">忘记密码</a>
						</span>
                    </div>
                </div>
                <div class="login-bottom">
                    <span id="online-user">在线人数：0</span>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="footer">
    <p>&copy; <span id="year"></span> &nbsp;思必达网络公司</p>
    <p>更好体验，请使用<a href='https://www.baidu.com/s?wd=%E8%B0%B7%E6%AD%8C%E6%B5%8F%E8%A7%88%E5%99%A8'
                  target="_blank">谷歌浏览器</a></p>
</div>
</body>
<script src="/sybida/jquery/jquery-3.3.1.min.js"></script>
<script src="/sybida/layui/layui.js"></script>
<script>
    var layer1
    layui.use('layer', function(){
        layer1 = layui.layer;
    });
    "use strict";
    {
        // particles class

        class Particle {
            constructor(k, i, j) {
                this.i = i;
                this.j = j;
                this.init();
                this.x = this.x0;
                this.y = this.y0;
                this.pos = posArray.subarray(k * 3, k * 3 + 3);
                this.pointer = pointer;
            }
            init() {
                this.x0 = canvas.width * 0.5 + this.i * canvas.width / 240;
                this.y0 = canvas.height * 0.5 + this.j * canvas.height / 160;
            }

            move() {

                 const dx = this.pointer.x - this.x;
                const dy = this.pointer.y - this.y;
                const d = Math.sqrt(dx * dx + dy * dy);
                const s = 1000 / d;
                this.x += -s * (dx / d) + (this.x0 - this.x) * 0.02;
                this.y += -s * (dy / d) + (this.y0 - this.y) * 0.02;
                // update buffer position
                this.pos[0] = this.x;
                this.pos[1] = this.y;
                this.pos[2] = 0.15 * s * s;
            }
        }
        // webGL canvas
        const canvas = {
            init(options) {
                // set webGL context
                this.elem = document.querySelector("canvas");
                const gl = (this.gl =
                    this.elem.getContext("webgl", options) ||
                    this.elem.getContext("experimental-webgl", options));
                if (!gl) return false;
                // compile shaders
                const vertexShader = gl.createShader(gl.VERTEX_SHADER);
                gl.shaderSource(
                    vertexShader,
                    `
					precision highp float;
					attribute vec3 aPosition;
					uniform vec2 uResolution;
					void main() {
						gl_PointSize = max(2.0, min(30.0, aPosition.z));
						gl_Position = vec4(
							( aPosition.x / uResolution.x * 2.0) - 1.0,
							(-aPosition.y / uResolution.y * 2.0) + 1.0,
							0.0,
							1.0
						);
					}
      	`
                );
                gl.compileShader(vertexShader);
                const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
                gl.shaderSource(
                    fragmentShader,
                    `
					precision highp float;
					void main() {
						vec2 pc = 2.0 * gl_PointCoord - 1.0;
						gl_FragColor = vec4(1.0, 0.85, 0.25, 1.0 - dot(pc, pc));
					}
				`
                );
                gl.compileShader(fragmentShader);
                const program = (this.program = gl.createProgram());
                gl.attachShader(this.program, vertexShader);
                gl.attachShader(this.program, fragmentShader);
                gl.linkProgram(this.program);
                gl.useProgram(this.program);
                // resolution
                this.uResolution = gl.getUniformLocation(this.program, "uResolution");
                gl.enableVertexAttribArray(this.uResolution);
                // canvas resize
                this.resize();
                window.addEventListener("resize", () => this.resize(), false);
                return gl;
            },
            resize() {
                this.width = this.elem.width = this.elem.offsetWidth;
                this.height = this.elem.height = this.elem.offsetHeight;
                for (const p of particles) p.init();
                this.gl.uniform2f(this.uResolution, this.width, this.height);
                this.gl.viewport(
                    0,
                    0,
                    this.gl.drawingBufferWidth,
                    this.gl.drawingBufferHeight
                );
            }
        };
        const pointer = {
            init(canvas) {
                this.x = 0.1 + canvas.width * 0.8;
                this.y = canvas.height * 0.8;
                this.s = 0;
                ["mousemove", "touchstart", "touchmove"].forEach((event, touch) => {
                    document.addEventListener(
                        event,
                        e => {
                            if (touch) {
                                e.preventDefault();
                                this.x = e.targetTouches[0].clientX;
                                this.y = e.targetTouches[0].clientY;
                            } else {
                                this.x = e.clientX;
                                this.y = e.clientY;
                            }
                        },
                        false
                    );
                });
            }
        };
        // init webGL canvas
        const particles = [];
        const gl = canvas.init({
            alpha: false,
            stencil: true,
            antialias: true,
            depth: false
        });
        // additive blending "lighter"
        gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
        gl.enable(gl.BLEND);
        // init pointer
        pointer.init(canvas);
        // init particles
        const nParticles = 240 * 80;
        const posArray = new Float32Array(nParticles * 3);
        let k = 0;
        for (let i = -120; i < 120; i++) {
            for (let j = -40; j < 40; j++) {
                particles.push(new Particle(k++, i, j));
            }
        }
        // create position buffer
        const aPosition = gl.getAttribLocation(canvas.program, "aPosition");
        gl.enableVertexAttribArray(aPosition);
        const positionBuffer = gl.createBuffer();
        // draw all particles
        const draw = () => {
            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
            gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0);
            gl.bufferData(
                gl.ARRAY_BUFFER,
                posArray,
                gl.DYNAMIC_DRAW
            );
            gl.drawArrays(gl.GL_POINTS, 0, nParticles);
        }
        // main animation loop
        const run = () => {
            requestAnimationFrame(run);
            for (const p of particles) p.move();
            draw();
        };

        requestAnimationFrame(run);
    }
</script>
<script>
    //获取在线人数
    var search=location.search
    var arr=search.split("=")
    var check=arr[1]
    if(check==1){
        alert("初次修改密码成功，请重新登录！")
    }
    if(check==2){
        alert("会话过期，请重新登录！")
    }
    var getOnlineUser = function () {
        $.get(url+"/login/loginpeople",function (data) {
            $('#online-user').text('在线人数：' + data.code);
        },"json");
    }
    // 间隔5000获取一次
    getOnlineUser();
    // var interval = setInterval(getOnlineUser, 5000);
    <!--验证码开始-->
    var show_num = [];
    draw(show_num);
    //验证码值
    $("#canvas").on('click', function () {
        draw(show_num);
    })
    function draw(show_num) {
        var canvas_width = $('#canvas').width();
        var canvas_height = $('#canvas').height();
        var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
        var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
        canvas.width = canvas_width;
        canvas.height = canvas_height;
        var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
        var aCode = sCode.split(",");
        var aLength = aCode.length;//获取到数组的长度
        for (var i = 0; i <= 3; i++) {
            var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
            var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
            var txt = aCode[j];//得到随机的一个内容
            show_num[i] = txt.toLowerCase();
            var x = 10 + i * 20;//文字在canvas上的x坐标
            var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
            context.font = "bold 23px 微软雅黑";
            context.translate(x, y);
            context.rotate(deg);
            context.fillStyle = randomColor();
            context.fillText(txt, 0, 0);
            context.rotate(-deg);
            context.translate(-x, -y);
        }
        for (var i = 0; i <= 5; i++) { //验证码上显示线条
            context.strokeStyle = randomColor();
            context.beginPath();
            context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.stroke();
        }
        for (var i = 0; i <= 30; i++) { //验证码上显示小点
            context.strokeStyle = randomColor();
            context.beginPath();
            var x = Math.random() * canvas_width;
            var y = Math.random() * canvas_height;
            context.moveTo(x, y);
            context.lineTo(x + 1, y + 1);
            context.stroke();
        }
    }
    function randomColor() {//得到随机的颜色值
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
    }
    <!--验证码结束-->
    //浏览器版本问题
    layui.use(['layer', 'form'], function () {
        var layer = layui.layer
            , form = layui.form;
        var $ = layui.$;
        var $body = $('body');
        var myDate = new Date();
        $('#year').text(myDate.getFullYear());
        var device = layui.device();
        if ('') {
            layer.alert("", 8);
        }
        if (device.ie) {
            $body.prepend('<button class="layui-btn layui-btn-warm layui-btn-fluid">为了更好的体验请使用谷歌浏览器</button>');
 					layer.alert("您的浏览器版本过低,可能会导致部分功能异常,建议使用chrome浏览器或升级到更高版本!", 8);
        }
        $('#pc-login-btn').click(function () {
            clearTimeout(timeoutId);
            $('#qrcode-login').hide();
            $('#pc-login').show();
            $(this).hide();
            $('#qrcode-login-btn').show();
            $('#login-form .login-type .login-type-tips').text($('#qrcode-login-btn').attr('alt') + '>>');
        });
        var changeVerCode = function () {

        };
        $body.on('click', '.captcha', changeVerCode);
        $('#L_vercode').one('focus', function () {
            $('#captcha').show();
            changeVerCode();
        });
        // 调整登录框位置
        var h = $(window).height();
        if (h > 550) {
            $('#login-form').animate({
                marginTop: (h - 500) / 2 + 'px',
            }, 800, 'swing');
        }
        //监听提交
        //手机号填写失去焦点事件
        $("#L_account").blur(function () {
            let phone=$("#L_account").val()
            if (!(/^1[3|4|5|6|7|8|9]\d{9}$/.test(phone))) {
                layer.msg('请输入正确的手机号！', {time: 1000, icon:6});
            }
        })
        //登录验证
        form.on('submit(login)', function (data) {
            var num = show_num.join("");
            var account = $("#L_account").val();
            var password = $("#L_pass").val();
            var verifycode = $("#L_vercode").val();
            if (!(/^1[3|4|5|6|7|8|9]\d{9}$/.test(account))) {
                layer.msg("手机号不合法哦！", {icon: 2});
            }else{
                var rdate={"phone":account,"psw":password}
                if (verifycode.toLowerCase() == num) {

                    $.ajax({
                        url: url+"/login/logincheck",
                        type: 'POST',
                     //   timeout: '30000',
                        data: "phone="+account+"&psw="+password,
                       // contentType: 'application/json;charset=utf-8',
                        dataType: 'json',
                        success: function (data) {
                            if(data.code==1){
                                var uid="userid="+data.data[0].userNull2
                                document.cookie=uid

                                if(data.message==1){
                                    showFetch1()
                                }else{
                                    if(data.data[0].userAuthority==9){
                                        //转到管理员页面
                                        window.location.href = "/sybida/manager/managerIndex.html";
                                    }else if(data.data[0].userAuthority==0){
                                        //转到班主任页面
                                        window.location.href = "managerteacherIndex/managerteacherIndex.html";
                                    }else if(data.data[0].userAuthority==2){
                                        //转到学生页面
                                        window.location.href = "/sybida/student/studentIndex.html";
                                    }else{
                                        //转到任课教师页面
                                        window.location.href = "managerteacherIndex/teacherIndex.html";
                                    }
                                }
                            }else{
                                layer.msg("用户名或密码错误，请重新输入！", {icon: 2});
                                draw(show_num);
                            }
                        },
                        error: function (data) {
                            alert("请检查网络是否连接" + data);
                        }
                    });
                } else {
                    layer.msg('验证码错误，请重新输入！');
                    // ("", {icon: 2});
                    draw(show_num);
                }
            }
                draw(show_num);
                return false;
        });
        //找回密码
        $('#find-pass-btn').click(showFetch);
        //重置密码
        function showFetch1() {

            layer.open({
                type: 2,//Page层类型
                area: ['500px', '400px'],
                skin: "",
                title: ['您是第一次登录请修改密码',
                    'border:none; background:#CAE1FF; color:#000;'],
                shade: 0.6, //遮罩透明度
                maxmin: false, //允许全屏最小化
                anim: 6, //0-6的动画形式，-1不开启
                // content: $('#findPassTp2').html(),
                content: '/sybida/common/changepassword.html',
                success: function () {}

            });
        }
        function showFetch() {
            var width = '350px';
            width = '300px';
            layer.open({
                type: 1,//Page层类型
                area: ['500px', width],
                skin: "",
                title: ['忘记密码',
                    'border:none; background:#CAE1FF; color:#000;'],
                shade: 0.6, //遮罩透明度
                maxmin: false, //允许全屏最小化
                anim: 3, //0-6的动画形式，-1不开启
                content: $('#findPassTpl').html(),
                success: function (layero, index) {
                    $('#btnSendCode1').addClass("layui-btn-disabled").attr("disabled", true).val("获取验证码");
                    $("#account").blur(function () {
                        let phone1=$('#account').val()
                        if (!(/^1[3|4|5|6|7|8|9]\d{9}$/.test(phone1))) {
                            layer.msg('手机号不合法哦！', {time: 1000, icon:6});
                            $('#btnSendCode1').addClass("layui-btn-disabled").attr("disabled", true).val("获取验证码");

                        }else{
                            $.post(url+"/login/checkphone","phone="+phone1,function (data) {
                                if(data.code==0){
                                    layer.msg('该手机号未注册！', {time: 1000, icon:6});
                                    $('#btnSendCode1').addClass("layui-btn-disabled").attr("disabled", true).val("获取验证码");
                                }else{
                                    $('#btnSendCode1').removeClass("layui-btn-disabled").attr("disabled", false).val("获取验证码");

                                }
                            })


                        }
                    })
                    $("#btnSendCode1").click(function () {
                        let phone2=$('#account').val()
                        //向手机发送验证码 验证码获取写这里
                        $("#btnSendCode1").attr("disabled", "disabled")
                        reloadSendBtn(60);
                    })
                }

            });
        }
        // 控制发送短信的按钮
        function reloadSendBtn(second) {
            if (second <= 0) {
                $('#btnSendCode1').removeClass("layui-btn-disabled").attr("disabled", false).val("获取验证码");
            } else {
                $('#btnSendCode1').addClass("layui-btn-disabled").attr("disabled", true).val("获取验证码(" + second + ")");
                setTimeout(function () {
                    reloadSendBtn(second - 1)
                }, 1000);
            }
        }
         //重置密码的提交
        form.on('submit(fetch)', function (data) {
            var l_index = layer.load(1, {
                shade: [0.1, '#fff']
                //0.1透明度的白色背景
            });
            var account = data.field.account;
            var verifycode = data.field.verifycode;
            $.ajax({
                url: url+"/login/resetpsw",
                type: "post",
                data: {
                    account: account,
                    verifycode: verifycode
                },
                dataType: "json",
                complete: function () {
                    layer.close(l_index);
                },
                success: function (result) {
                    if (result.code == 2) {//成功
                        layer.alert(result.message + "，<br>登陆后请尽快修改",
                            7, function () {
                                layer.closeAll();
                            });
                    } else if(result.code == 1){//失败

                        layer.alert("手机号未注册");
                    }else{
                        layer.alert("验证码不太对");
                    }
                },
                error: function () {
                    layer.alert("登录超时，请稍后重试！");
                }
            });
            return false;
        });
    });
</script>

<!--//重置密码的HTML文档-->
<script type="text/html" id="findPassTpl">
    <div style="padding:20px;">
        <form class="layui-form layui-form-pane" action="" lay-filter="fetchForm">
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="account" id="account" autocomplete="off"
                           lay-verify="required" placeholder="输入注册手机号才可获取验证码" class="layui-input">
                </div>
            </div>
            <br>
            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-inline">
                    <input type="text" name="verifycode"  id="verifycode"
                           lay-verify="required" placeholder="请输入验证码" autocomplete="off"
                           class="layui-input">
                </div>
                <input id="btnSendCode1" type="button" class="btn btn-default layui-btn layui-btn-warm" value="获取验证码"/>

                <div class="layui-form-mid" style="padding: 0 !important; margin-right:0">
                </div>
                <br><br>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-warm" lay-filter="fetch" lay-submit>找回</button>&nbsp;&nbsp;&nbsp;&nbsp;
                <span style="color: red">找回后默认密码为1234</span>
            </div>

        </form>
    </div>
</script>



</html>